<template id="personCenter">
    <div class="person_all">
        <div class="personCenter_top" >
            <h3 id="tag_name">个人信息 <time class="user_but" @click="user_But()">保存</time></h3>
            <img src="../image/blue_da.png" alt="" @click="get_pre()">

        </div>
        <div class="person_1 showimg">
            <span>头像</span>
            
            <img v-bind:src="userinfo.img ? userinfo.img : img" alt="">
            <input type="file" class="files"  @change="getFile($event)">
            <input type="hidden" v-model="source" >
           
            <!-- <img src="../image/day.jpg" alt=""> -->
        </div>
        <div class="person_2">
            <span>昵称</span>
            <span>
              <input id="name" class="name_input" type="text"  v-model="name">
            </span>
            <!-- <img src="../image/day.jpg" alt=""> -->
        </div>
        <!--会员等级-->
        <div class="person_8">
            <span>会员等级</span>
            <img v-if="userinfo.is_member" src="../image/member.png" alt="">
            <img v-else src="../image/day.jpg" alt="">
        </div>
        <div class="person_3" @click="get_sex(userinfo.sex)">
            <span>性别</span>
            <span>{{sex_tips}}</span>
            <img src="../image/day.jpg" alt="">
        </div>
        <div class="person_4" @click="get_birth()">
            <span>生日</span>
            <input id="birth_con"  readonly="readonly" placeholder="未填写" v-model="birthday">
            <img src="../image/day.jpg" alt="">
        </div>
        <div class="person_5" @click="get_Index()" style="display:none;">
            <span>地址管理</span>
            <img src="../image/day.jpg" alt="">
        </div>
        <div class="person_6" @click="get_bind()"  style="display:none;">
            <span>绑定手机</span>
            <span>{{userinfo.mobile_phone}}</span>
            <img src="../image/day.jpg" alt="">
        </div>
        <div class="person_7" @click="get_pd()" style="display:none;">
            <span>修改密码</span>
            <span>设置密码</span>
            <img src="../image/day.jpg" alt="">
        </div>
<!--修改生日弹窗-->
        <div class="birth" v-show="birth_show">
            <div class="birth_span1">
                <span  @click="get_ok(1)">取消</span>
                <span  @click="get_ok(0)">完成</span>
            </div>

            <div class="birth_mm">
            <div class="swiper-container" id="birth">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">保密</div>
                    <div class="swiper-slide">帅哥</div>
                    <div class="swiper-slide">美女</div>
                  
                </div>
               <!-- <div class="swiper-wrapper">
                    <div class="swiper-slide">保密</div>
                </div>
                <div class="swiper-wrapper">
                    <div class="swiper-slide">帅哥</div>
                </div>-->
            </div>
            </div>

        </div>
        <div class="back_one" v-show="show_ba" @click="get_xiao()"></div>
    </div>


</template>

<script>
    export default {
        name: 'personCenter',
        data() {
            return {
                birth_show:false,
                show_ba:false,
                userinfo:'',
                img:require("../image/ma.jpg"),
                source:'center',
                name:'',
                sex:0,
                sex_tips:'保密',
                birthday:'',
            }
        },

        mounted: function () {

            //获取用户信息
            this.get_info();

            //高度
            let H = $(window).height();
            $('.person_all').height(H)
            

            //日期初始化
            var calendar = new datePicker();
            let that = this;
            calendar.init({
                'trigger': '#birth_con', /*按钮选择器，用于触发弹出插件*/
                'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
                'minDate':'1900-1-1',/*最小日期*/
                'maxDate':'2100-12-31',/*最大日期*/
                'onSubmit':function(){/*确认时触发事件*/
                    that.birthday = calendar.value;
                },
                'onClose':function(){/*取消时触发事件*/
                    that.birthday = that.userinfo.birthday;
                }
            });

        },
        methods: {
            get_sex:function(sex){
                let that = this;
                var swiper_first = new Swiper('#birth', {
                    observer:true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents:true,//修改swiper的父元素时，自动初始化swiper
                    direction:'vertical',
                    onSlideChangeEnd: function(swiper){
                        let sex      = swiper.activeIndex;
                        let sex_tips = "";
                        if(sex == 0){sex_tips = "保密"}
                        if(sex == 1){sex_tips = "男"}
                        if(sex == 2){sex_tips = "女"}
            
                        that.sex      = sex; 
                        that.sex_tips = sex_tips; 
                    
                        console.log(that.sex);
                    }
                });
                swiper_first.activeIndex = sex;

                this.birth_show=!this.birth_show;
                this.show_ba=true;
            },
            get_birth:function(){
            
            },
            get_Index:function(){
                this.$router.push('/addIndex');
            },
            get_pre:function () {
                window.history.go(-1);
            },
            get_ok:function(type){
                if(type == 1){
                    this.sex      = this.userinfo.sex; 
                    this.sex_tips = this.userinfo.sex_tips; 
                }

                this.show_ba=false;
                this.birth_show=false;
            },
            get_bind:function(){
                this.$router.push('/bindPhone')
            },
            get_pd:function () {
                this.$router.push('/person_psd')
            },
            get_info:function(){
                //初始化个人信息
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Users.php?mode=main';
                let Data = this.GLOBAL.dataParam();

                this.$ajax.post(url, Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        this.userinfo = temp.data;
                        this.name     = temp.data.user_name;
                        this.sex      = temp.data.sex;
                        this.sex_tips = temp.data.sex_tips;
                        this.birthday = temp.data.birthday;
                    }else{
                        console.log(temp.msg);        
                    }                 
                 })

            },
            getFile(event) {
                this.file = event.target.files[0];
                
                let form = {"image":this.file,"source":this.source}             
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Public.php?mode=image';
                let Data = this.GLOBAL.formParam(form);

                this.$ajax.post(url, Data).then((res) => {
                    if(res.data.code == 200){

                        this.userinfo.img = res.data.data;
                        this.img = res.data.data;

                    }else{
                        alert(res.data.msg);        
                    }       
                }).catch((err) => {
                    console.log(err);
                })

            },
            user_But:function(){
                let data = [];
                data['name']        = this.name;
                data['img']         = this.userinfo.img ? this.userinfo.img : img;
                data['birthday']    = this.birthday;
                data['sex']         = this.sex;


                //初始化个人信息
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Users.php?mode=userinfo';
                let Data = this.GLOBAL.dataParam(data);

                this.$ajax.post(url, Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        //alert("保存成功");
                        this.$router.push('/center')
                    }else{
                        console.log(temp.msg);        
                    }                 
                 })
            }
        }
    }


</script>
<style>
    .user_but{
        float: right;
        margin-right: 0.2rem;
    }
    .name_input{
        height: 0.65rem;
        text-align: right;
        border: 0;
        width: auto;
        display:block;
        outline:none;
    }
     .showimg{
         position: relative;
         width:1.11rem;
         height: 1.09rem;
         display:block;
        }
    .showimg .files {
        position: absolute;
        font-family: Arial;
        width: 1.3rem;
        height: 1.2rem;
        cursor: pointer;
        background-color: #999999;
        opacity: 0;
        z-index: 3;
        right: 42px;
        top: 11px;
        }   
    .person_8{
        height:0.65rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
    }
    .person_8 span:nth-of-type(1){
        height:0.65rem;
        line-height:0.65rem;
        font-size:0.26rem;
        color:#676767;
        margin-left:0.24rem;
        display:block;
        float:left;
    }
    .person_8 img:nth-of-type(1){
        width:0.526rem;
        height:0.56rem;
        position:absolute;
        right:0.2rem;
        top:0.05rem;
        display:block;

    }
    .person_8 img:nth-of-type(2){
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        display:block;

    }
    /*8*/
    .date_bg{
        background:#000000;
        opacity:0.5;
    }
    .back_one{
        height:100%;
        width:100%;
        background:#000000;
        filter:alpha(opacity=50);
        opacity: 0.5;
        position:fixed;
        left:0;
        top:0;
        z-index: 1;
    }
    .date_roll{
        font-weight:normal;
    }
    /*生日*/
    #birth .swiper-wrapper .swiper-slide.swiper-slide-active{
        color:#73c1fa;
        border-top:0.01rem solid #abdffe;
        border-bottom:0.01rem solid #abdffe;
    }
    #birth,.swiper-container,.swiper-wrapper{
        width:100%;
      /*  height:2.81rem;*/
        height:0.54rem;
        overflow: visible;
    }
    .birth_mm{
        height:2.3rem;
        overflow:hidden;
    }
    #birth .swiper-wrapper{
        height:0.54rem;
        width:4rem;
        margin:0 auto;
    }
    #birth .swiper-wrapper .swiper-slide{
        font-size:0.28rem;
        color:#dcdcdc;
        line-height:0.54rem;
        height:0.54rem;
        text-align:center;
        width:4rem;
    }
    .birth{
        width:100%;
        height:3.52rem;
        position:fixed;
        bottom:0;
        left:0;
        z-index:2;
        background:#ffffff;
    }
    .birth_span1{
        height:0.7rem;
        width:100%;
        background:#f5f4f2;
        margin-bottom:0.6rem;
    }
    .birth_span1 span:nth-of-type(1){
          height:0.7rem;
        font-size:0.3rem;
        color:#2eaffc;
        width:1.03rem;
        float:left;
        line-height:0.7rem;
        text-align:center;
    }
    .birth_span1 span:nth-of-type(2){
        height:0.7rem;
        font-size:0.3rem;
        color:#2eaffc;
        width:1.03rem;
        float:right;
        line-height:0.7rem;
        text-align:center;
    }
    /*头像部分*/
    .person_7{
        height:0.65rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
    }
    .person_7 span:nth-of-type(1){
        height:0.65rem;
        line-height:0.65rem;
        font-size:0.26rem;
        color:#676767;
        margin-left:0.24rem;
        display:block;
        float:left;
    }
    .person_7 span:nth-of-type(2){
        display:block;
        height:0.65rem;
        float:right;
        line-height:0.65rem;
        margin-right:0.85rem;
        font-size:0.2rem;
        color:#a5a5a5;
    }
    .person_7 img{
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        display:block;

    }
    .person_6{
        height:0.65rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
    }
    .person_6 span:nth-of-type(1){
        height:0.65rem;
        line-height:0.65rem;
        font-size:0.26rem;
        color:#676767;
        margin-left:0.24rem;
        display:block;
        float:left;
    }
    .person_6 span:nth-of-type(2){
        display:block;
        height:0.65rem;
        float:right;
        line-height:0.65rem;
        margin-right:0.85rem;
        font-size:0.2rem;
        color:#a5a5a5;
    }
    .person_6 img{
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        display:block;

    }
    .person_5{
        height:0.65rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
        margin-bottom:0.14rem;
    }
    .person_5 span:nth-of-type(1){
        height:0.65rem;
        line-height:0.65rem;
        font-size:0.26rem;
        color:#676767;
        margin-left:0.24rem;
        display:block;
        float:left;
    }
    .person_5 img{
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        display:block;

    }
    .person_4{
        height:0.65rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
    }
    .person_4 span:nth-of-type(1){
        height:0.65rem;
        line-height:0.65rem;
        font-size:0.26rem;
        color:#676767;
        margin-left:0.24rem;
        display:block;
        float:left;
    }
    .person_4 input{
        display:block;
        height:0.65rem;
        width:2rem;
        float:right;
        line-height:0.65rem;
       /* margin-right:-0.48rem;*/
        font-size:0.2rem;
        color:#a5a5a5;
        text-indent: 0.2rem;
        border:0;
        outline:none;
    }
    .person_4 input::-webkit-input-placeholder {
        text-indent: 0.6rem;
    }
    .person_4 img{
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        display:block;

    }
    .person_3{
        height:0.65rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
    }
    .person_3 span:nth-of-type(1){
        height:0.65rem;
        line-height:0.65rem;
        font-size:0.26rem;
        color:#676767;
        margin-left:0.24rem;
        display:block;
        float:left;
    }
    .person_3 span:nth-of-type(2){
        display:block;
        height:0.65rem;
        float:right;
        line-height:0.65rem;
        margin-right:0.85rem;
        font-size:0.2rem;
        color:#a5a5a5;
    }
    .person_3 img{
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        display:block;

    }
    /*3*/
    .person_2{
        height:0.65rem;
        width:100%;
        border-bottom:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
    }
    .person_2 span:nth-of-type(1){
        height:0.65rem;
        line-height:0.65rem;
        font-size:0.26rem;
        color:#676767;
        margin-left:0.24rem;
        display:block;
        float:left;
    }
    .person_2 span:nth-of-type(2){
        display:block;
        height:0.65rem;
        float:right;
        line-height:0.65rem;
        margin-right:0.2rem;
        font-size:0.2rem;
        color:#a5a5a5;
    }
    .person_2 img{
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        display:block;

    }
    .person_1 span{
        height:1.53rem;
        width:1.5rem;
        line-height:1.53rem;
        color:#676767;
        font-size:0.26rem;
        margin-left:0.24rem;
        display:block;
    }
    .person_1 img:nth-of-type(1){
        height:1.03rem;
        width:1.03rem;
        -webkit-border-radius: 50%;
        border-radius:50%;
        position:absolute;
        top:0.28rem;
        right:0.2rem;
        display:block;
    }
    .person_1 img:nth-of-type(2){
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        right:0.24rem;
        top:0.5rem;
        display:block;
    }
    .person_1{
        width:100%;
        height:1.53rem;
        border:0.01rem solid #f0f0f0;
        background:#ffffff;
        position:relative;
    }
    /*头部部分*/
    .person_all{
        background:#f5f4f2;
        width:100%;
        height:11.3rem;
        overflow-x: hidden;
    }
    .personCenter_top h3{
        width:100%;
        height:0.79rem;
        line-height:0.79rem;
        text-align:center;
        color:#2eaffc;
        font-size:0.28rem;
        font-weight:normal;

    }
    .personCenter_top img{
        display:block;
        position:absolute;
        height:0.36rem;
        width:0.36rem;
        left:0.27rem;
        top:0.25rem;
    }
    .personCenter_top{
        width:100%;
        height:0.79rem;
        border-bottom:1px solid #f0f0f0;
        position:relative;
        background:#ffffff;
        margin-bottom:0.1rem;
    }
</style>